<template>
	<view class="commdity" :style="`flex-wrap:`+ Warp+`;`+`font-size:`+ fontsize+`;`">
		<view class="commondity_item" v-for="(item,index) in dataList" :key="item.product_id" :style="`width:`+itemwidth+`;`" @tap="toDetails(item.product_id)">
			<image class="commondity_img" :src="`http://192.168.0.103:3000/` +item.product_picture" :style="`height:`+itemheight+`;`"></image>
			<view class="commondity_context">
				<text class="commondity_name">{{item.product_name}}</text>
				<text class="del">{{item.product_title}}</text>
				<view class="commondity_price">
					<text class="pprice">￥{{item.product_selling_price}}</text>/
					<text class="oprice">￥{{item.product_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"commondity",
		props:{
			dataList: Array,
			itemwidth:{
			type: String,
			default:'375rpx'},
			itemheight:{
			type: String,
			default:'375rpx'},
			Warp:{
			type:String,
			default: 'wrap'
			},
			fontsize:{
			type:String,
			}
			},
		data() {
			return {
				
			};
		},
		onload(){
			console.log($target)
		},
		methods:{
			toDetails(id){
				uni.navigateTo({
					url:'/subpages/details/index?product_id='+id
				})
			}
		}
	}
</script>

<style>
	.commdity{
		width: 100%;
		display: flex;
		overflow: hidden;
	}
	.commondity_item{
		padding-bottom: 20rpx;
		border: 2rpx solid #49BDFB;
	}
	.commondity_img{
		width: 100%;
	/* 	height: 375rpx; */
	}
	.commondity_context{
		overflow: hidden;
		text-align: center;
	}
	.commondity_name{
		width: 90%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333333;
		word-break: break-all;
		padding: 10rpx 20rpx;
	}
	.del{
		width: 100%;
		color: red;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 26rpx;
	}
	.commondity_price{
		margin-bottom: 10rpx;
	}
	.oprice{
		color: red;
		text-decoration: line-through;
	}

</style>